import {makeStyles} from "@rn-vui/themed";
import {StyleSheet} from "react-native";

const useStyles = makeStyles(({colors}) => ({
    container: {
        flex: 1,
        backgroundColor: colors?.background
    },
    footer: {
        flexDirection: 'row',
        padding: 10,
        borderTopWidth: StyleSheet.hairlineWidth,
        borderTopColor: colors?.yellow,
        columnGap: 20,
        backgroundColor: colors?.background
    },
    button: {
        flexShrink: 20,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: colors?.primary,
        paddingHorizontal: 20,
        paddingVertical: 5
    },
    buttonDisabled: {
        backgroundColor: colors?.grey5
    },
    buttonActive: {
        backgroundColor: colors?.green
    },
    buttonText: {
        color: colors.white,
        fontSize: 16,
        fontWeight: 'bold'
    },
    separator: {
        flex: 1
    },
    badge: {
        position: 'absolute',
        top: -10,
        right: -10,
        backgroundColor: colors.orange,
        borderRadius: 20,
        width: 30,
        height: 30,
        justifyContent: 'center',
        alignItems: 'center'
    },
    badgeText: {
        color: colors.white,
        fontSize: 16,
        fontWeight: 'bold'
    },
    pager: {
        flexDirection: 'row',
    },
    order: {
        borderLeftWidth: 2,
        borderLeftColor: colors?.yellow,
        position: 'relative',
        height: '100%'
    },
    orderHeader: {
        backgroundColor: colors.blue,
        paddingVertical: 5,
        paddingHorizontal: 5,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        columnGap: 0
    },
    orderRow: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    orderN: {
        color: colors.yellow,
        fontSize: 26,
        fontWeight: 'bold'
    },
    orderD: {
        color: colors.white,
        fontSize: 16,
    },
    createVia: {
        color: colors.yellow,
        fontSize: 20,
        fontWeight: 'bold',
        textAlign: 'right',
        textTransform: 'uppercase'
    },
    shippingMethod: {
        color: colors.grey5,
        fontSize: 14,
        fontWeight: 'bold',
        textAlign: 'right'
    },
    orderItem: {
        rowGap: 3,
        padding: 5
    },
    orderItemTitle: {
        color: colors.safetyOrange,
        fontSize: 24,
        fontWeight: 'bold',
        verticalAlign: 'top',
        lineHeight: 24 * 1.2
    },
    orderItemOptionTitle: {
        color: colors.white,
        fontSize: 22,
        lineHeight: 22 * 1.2
    },
    orderButton: {
        paddingVertical: 10,
        alignItems: 'center',
        justifyContent: 'center'
    },
    orderButtonText: {
        color: colors.white,
        fontSize: 16,
        textTransform: 'uppercase'
    },
    statusButton: {
        backgroundColor: colors.green,
    },
    noteButton: {
        backgroundColor: colors.yellow,
        position: 'absolute',
        right: 10,
        bottom: 10,
        paddingVertical: 7,
        paddingHorizontal: 10
    },
    checkMask: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0,0,0,0.3)',
        alignItems: 'center',
        justifyContent: 'center',
    },
    orderContent: {
        flex: 1,
        flexDirection: 'row',
        position: 'relative',
    }
}))

export default useStyles;
